<template>
	<view class="container">
		<cu-custom bgColor="bg-blue" isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">巡检详情</block>
		</cu-custom>
		<view class="bg-top bg-blue">
			<view class="top-box shadow" style="margin-bottom: 10px;padding-top: 0rpx;">
				<view class="cu-list menu">
					<view class="cu-item" style="padding: 0;min-height:80rpx">
						<view class="content" style="margin-top: 0rpx;">
							<text class="text-black text-bold">巡检记录:</text>
						</view>
						<view class="action" style="margin-top: 0rpx;">
							
						</view>
					</view>
					<view class="cu-item" style="padding: 0;margin-top: 0rpx;min-height:70rpx;border: none !important;">
						<view class="content margin-top" style="display: flex; justify-content: space-around;margin-top: 0px;">
							<text class="bxImg cuIcon-newshotfill text-gray"></text>
							<text class="text-black"
								style="min-width: 400rpx; max-width: 600rpx; text-align: left;">计划：{{dataDetail.LastQrcodeSummary.JobName==''?'计划外巡检':dataDetail.LastQrcodeSummary.JobName}}</text>
							<text class="text-black"
								style="min-width: 290rpx; max-width: 200rpx; text-align: left;"></text>
						</view>
					</view>
					
					<view class="cu-item" style="padding: 0;margin-top: 0rpx;min-height:70rpx;border: none !important;">
						<view class="content margin-top" style="display: flex; justify-content: space-around;margin-top: 0px;">
							 <!-- 1 未知，2 正常，3 异常 -->
							<text :class="dataDetail.LastQrcodeSummary.IsOkTitle=='正常'?'text-green cuIcon-roundcheckfill':(dataDetail.LastQrcodeSummary.IsOkTitle=='异常'?'text-red cuIcon-roundclosefill':'text-gray cuIcon-infofill')" class="bxImg"></text>
							<text class="text-black"
								style="min-width: 400rpx; max-width: 600rpx; text-align: left;">结果：{{dataDetail.LastQrcodeSummary.IsOkTitle}}</text>
							<text class="text-black"
								style="min-width: 290rpx; max-width: 200rpx; text-align: left;"></text>
						</view>
					</view>
					
					<view class="cu-item" style="padding: 0;margin-top: 0rpx;min-height:70rpx;border: none !important;">
						<view class="content margin-top" style="display: flex; justify-content: space-around;margin-top: 0px;">
							<text class="bxImg cuIcon-friendaddfill text-blue"></text>
							<text class="text-black"
								style="min-width: 400rpx; max-width: 600rpx; text-align: left;">巡检员：{{dataDetail.LastQrcodeSummary.RealName}}</text>
							<text class="text-black"
								style="min-width: 290rpx; max-width: 200rpx; text-align: left;"></text>
						</view>
					</view>
					<view class="cu-item" style="padding: 0;min-height:70rpx;border: none !important;">
						<view class="content margin-top" style="display: flex; justify-content: space-around;margin-top: 0px;">
							<text class="cuIcon-timefill text-blue  margin-right-xs"></text>
							<text class="text-black"
								style="min-width: 400rpx; max-width: 600rpx; text-align: left;">时间：{{dataDetail.LastQrcodeSummary.AddTime}}</text>
							<text class="text-black"
									style="min-width: 290rpx; max-width: 200rpx; text-align: left;"></text>
						</view>
					</view>
				</view>
			</view>
			
			<view v-if="dataDetail.IsSecondDevice==false">
				<view class="top-box shadow" v-if="dataDetail.LastQrcodeLogs.length>0">
					<view class="cu-list menu">
						<view class="cu-item" style="padding: 0;" v-for="(res, index) in dataDetail.LastQrcodeLogs" :key="res.id">
							<view class="content" style="display: flex; justify-content: space-around;">
								<text :class="res.ProcessStatus==1?'text-green cuIcon-roundcheckfill':(res.ProcessStatus==2?'text-red cuIcon-roundclosefill':'text-gray cuIcon-infofill')" class="bxImg"></text>
								<text class="text-black text-bold"
									style="min-width: 290rpx; max-width: 290rpx; text-align: left;">{{res.label}}</text>
								<text class="text-black"
									style="min-width: 290rpx; max-width: 290rpx; text-align: left;">{{res.value}}</text>
							</view>
						</view>
					</view>
						
				</view>
				
				<view v-if="dataDetail.SignImageList.length>0">
					<view  v-for="(res, index) in dataDetail.SignImageList"  class="center-box shadow">
						<view style="padding-bottom: 20rpx;" class="cu-list menu">
							<view class="cu-bar bg-white margin-top-xs u-border-bottom">
								<view style="margin-left: 0rpx !important;" class="action sub-title">
									<text class="text-xl text-bold text-blue text-shadow">{{res.title}}</text>
									<text class="text-ABC text-blue"></text>
								</view>
							</view>
							<view v-if="res.value.length < 1" class="padding text-grey">暂无数据</view>
							<view v-if="res.value.length > 0">
							     <view v-for="(item,jndex) in res.value">
									 <view class="cu-item imagesclass" style="padding: 0;">
									 	<view class="content">
									 		<image @click="goPreviewImage(res.value,'',jndex)"  :src="item" class="png cu-avatar sm imagesclassdetail" mode="aspectFit"></image>
									 	</view>
									 </view>
								 </view>
							</view>
						</view>
					</view>
				</view>
				<view v-if="dataDetail.SignVideoList.length>0">
					<view v-for="(res, index) in dataDetail.SignVideoList" class="center-box shadow">
						<view class="cu-list menu">
							<view class="cu-bar bg-white margin-top-xs u-border-bottom">
								<view style="margin-left: 0rpx !important;" class="action sub-title">
									<text class="text-xl text-bold text-blue text-shadow">{{res.title}}</text>
									<text class="text-ABC text-blue"></text>
								</view>
							</view>
							<view class="cu-item" style="padding: 0;" v-for="(item,jndex) in res.value">
								<view class="content">
									<video  v-if="item !=null && item !=''" :src="item" style="width: 100%;"  playerid="txv1"></video>
								</view>
							</view>
					
						</view>
					</view>
				</view>
			</view>
			<view v-if="dataDetail.IsSecondDevice">
				<view v-for="(res1, index) in dataDetail.SecondDeviceSignList" :key="res1.Id" style="margin-bottom: 20rpx;">
					<view class="top-box shadow" v-if="res1.LastQrcodeLogs.length>0">
						<view style="padding-bottom: 0rpx;" class="cu-list menu">
							<view class="cu-bar bg-white margin-top-xs u-border-bottom">
								<view style="margin-left: 0rpx !important;" class="action sub-title">
									<text class="text-xl text-bold text-blue text-shadow">下属设备：{{res1.Title}}</text>
									<text class="text-ABC text-blue"></text>
								</view>
							</view>
						</view>
						<view class="cu-list menu" style="margin-top: 0rpx;">
							<view class="cu-item" style="padding: 0;" v-for="(res, index) in res1.LastQrcodeLogs" :key="res.id">
								<view class="content" style="display: flex; justify-content: space-around;">
									<text :class="res.ProcessStatus==1?'text-green cuIcon-roundcheckfill':(res.ProcessStatus==2?'text-red cuIcon-roundclosefill':'text-gray cuIcon-infofill')" class="bxImg"></text>
									<text class="text-black text-bold"
										style="min-width: 290rpx; max-width: 290rpx; text-align: left;">{{res.label}}</text>
									<text class="text-black"
										style="min-width: 290rpx; max-width: 290rpx; text-align: left;">{{res.value}}</text>
								</view>
							</view>
						</view>
						<view v-if="res1.SignImageList.length>0">
							<view  v-for="(res, index) in res1.SignImageList">
								<view style="padding-bottom: 0rpx;" class="cu-list menu">
									<view class="cu-bar bg-white margin-top-xs u-border-bottom">
										<view style="margin-left: 0rpx !important;" class="action sub-title">
											<text class="text-mi text-bold text-black">{{res.title}}</text>
											<text class="text-ABC text-blue"></text>
										</view>
									</view>
									<view v-if="res.value.length < 1" class="padding text-grey">暂无数据</view>
									<view v-if="res.value.length > 0">
									     <view v-for="(item,jndex) in res.value">
											 <view class="cu-item imagesclass" style="padding: 0;">
											 	<view class="content">
											 		<image @click="goPreviewImage(res.value,'',jndex)"  :src="item" class="png cu-avatar sm imagesclassdetail" mode="aspectFit"></image>
											 	</view>
											 </view>
										 </view>
									</view>
								</view>
							</view>
						</view>
						<view v-if="res1.SignVideoList.length>0">
							<view v-for="(res, index) in res1.SignVideoList">
								<view class="cu-list menu" style="margin-top: 0rpx;">
									<view class="cu-bar bg-white margin-top-xs u-border-bottom">
										<view style="margin-left: 0rpx !important;" class="action sub-title">
											<text class="text-mi text-bold text-black">{{res.title}}</text>
											<text class="text-ABC text-blue"></text>
										</view>
									</view>
									<view class="cu-item" style="padding: 0;" v-for="(item,jndex) in res.value">
										<view class="content">
											<video  v-if="item !=null && item !=''" :src="item" style="width: 100%;"  playerid="txv1"></video>
										</view>
									</view>
							
								</view>
							</view>
						</view>
					</view>
					
					<!-- <view v-if="res1.SignImageList.length>0">
						<view  v-for="(res, index) in res1.SignImageList"  class="center-box shadow">
							<view style="padding-bottom: 20rpx;" class="cu-list menu">
								<view class="cu-bar bg-white margin-top-xs u-border-bottom">
									<view style="margin-left: 0rpx !important;" class="action sub-title">
										<text class="text-xl text-bold text-blue text-shadow">{{res.title}}</text>
										<text class="text-ABC text-blue"></text>
									</view>
								</view>
								<view v-if="res.value.length < 1" class="padding text-grey">暂无数据</view>
								<view v-if="res.value.length > 0">
								     <view v-for="(item,jndex) in res.value">
										 <view class="cu-item imagesclass" style="padding: 0;">
										 	<view class="content">
										 		<image @click="goPreviewImage(res.value,'',jndex)"  :src="item" class="png cu-avatar sm imagesclassdetail" mode="aspectFit"></image>
										 	</view>
										 </view>
									 </view>
								</view>
							</view>
						</view>
					</view>
					<view v-if="res1.SignVideoList.length>0">
						<view v-for="(res, index) in res1.SignVideoList" class="center-box shadow">
							<view class="cu-list menu">
								<view class="cu-bar bg-white margin-top-xs u-border-bottom">
									<view style="margin-left: 0rpx !important;" class="action sub-title">
										<text class="text-xl text-bold text-blue text-shadow">{{res.title}}</text>
										<text class="text-ABC text-blue"></text>
									</view>
								</view>
								<view class="cu-item" style="padding: 0;" v-for="(item,jndex) in res.value">
									<view class="content">
										<video  v-if="item !=null && item !=''" :src="item" style="width: 100%;"  playerid="txv1"></video>
									</view>
								</view>
						
							</view>
						</view>
					</view> -->
				</view>
			</view>
			<view style="width: 100%;height: 160rpx;"></view>
		</view>
		<view v-if="showReSign1&&CanReSign" class="publish-goods-wrap">
			<view class="publish-goods-btn" @click="sub">重新巡检</view>
		</view>
	</view>
</template>

<script>
import request from '@/common/request.js';
var _this;
export default {
	props: {
	},
	data() {
		return {
			signId:'',
			qrcodeId:'',
			params:{},
			showReSign1:false,
			CanReSign:false,
			dataDetail:{
				IsSecondDevice:false,
				SecondDeviceSignList:[{}],
				baseUrl:'',
				Video:'',
				Images:[],
				VideoArrys:[],
				LastQrcodeLogs:[{
					ProcessStatus:1,
					label:'',
					value:''
				}],
				LastQrcodeSummary:{
					JobName:'',
					RealName:'',
					AddTime:'',
				},
				SignImageList:[
					{
						title:'',
						value:[]
					}
				],
				SignVideoList:[
					{
						title:'',
						value:[]
					}
				]
			}
		};
	},
	onLoad(option) {
		//SignStatus
		this.GetQrcodeLogsBySignId(option.qrcodeid,option.signid)
		this.signId=option.signid
		this.qrcodeId=option.qrcodeid
		if(option.showReSign!=null&&option.showReSign!=''&&option.showReSign!=undefined){
			if(option.showReSign==1){
				this.showReSign1=true
			}
		}
	},
	mounted() {
	},

	methods: {
		sub(){
			let that=this
			uni.showModal({
				title: '提示',
				content: '重新巡检会删除原始数据，是否继续？',
				success: function (res) {
					if (res.confirm) {
						//uni.showToast({ title:'功能开发中...', icon: 'none',duration:3000 });
						//去删除巡检数据
						uni.showLoading({
							title: '删除中...'
						})
						let opts = {
							url: 'api/RemoveSignData',
							method: 'get'
						};
						let params1={
							singId:that.signId
						}
						request.httpTokenRequest(opts,params1).then(res => {
							uni.hideLoading();
							if(res.data.code == 1){
								uni.showToast({ title: '旧数据删除成功', icon: 'none' });
								setTimeout(() => {
									 uni.reLaunch({
										url: '/pages/index/tabbar?PageCur=qrcode&InspectionQrcodeId='+that.qrcodeId
									 });
								}, 0)
							}
							else{
								uni.showToast({ title: res.data.msg, icon: 'none' });
							}
						});
					}
				}
			});
		},
		goPreviewImage(url,baseurl,current){
			let urls=[]
			for(let i=0;i<url.length;i++){
				urls.push(baseurl+url[i])
			}
			uni.previewImage({
				current:current,
				urls:urls
			});
		},
		videoErrorCallback: function(e) {
			uni.showModal({
				content: e.target.errMsg,
				showCancel: false
			})
		},
		GetQrcodeLogsBySignId(qrcode_id,sign_id) {
			uni.showLoading({
				title: '加载中'
			})
			var that = this;
			let opts = {
				url: 'api/GetQrcodeLogsBySignId',
				method: 'get'
			};
			that.params.qrcode_id=qrcode_id;
			that.params.sign_id=sign_id;
			request.httpTokenRequest(opts,that.params).then(res => {
				uni.hideLoading();
				if(res.data.code == 1){
					that.dataDetail=res.data.data;
					console.log('dataDetail:'+JSON.stringify(that.dataDetail))
					that.CanReSign=res.data.data.LastQrcodeSummary.CanReSign
					that.dataDetail.baseUrl=this.$request22.baseUrl1
					uni.hideLoading();
				}
				else{
					uni.showToast({ title: res.data.msg, icon: 'none' });
				}
			});
		},
	}
};
</script>

<style lang="scss" scoped>
	
	.cu-list.menu-avatar>.cu-item:after, .cu-list.menu>.cu-item:after{
		border:none !important;
	}
	.uni-video{
		width: 100% !important;
	}
	.container {
		width: 750rpx;
		color: #333333;
		.imagesclass{
			width:33%;
			float:left;
			.imagesclassdetail{
				width: 100px !important;
				height: 100px !important;
				margin-right: 20px;
			}
		}
		.bg-top {
			margin-top: -1rpx;
			width: 750rpx;
			height: 220rpx;
			padding-top: 30rpx;
			border-radius: 0 0 20% 20%;

			.top-box {
				width: 700rpx;
				background-color: #FFFFFF;
				margin: 0 auto;
				border-radius: 20rpx;
				padding: 20rpx 30rpx 0rpx;
				position: relative;

				.qh-pic {
					position: absolute;
					right: 64rpx;
					top: -50rpx;
					border-radius: 12rpx;
				}

				.qh-title {
					width: 100%;
					height: 60rpx;
					line-height: 65rpx;
					padding-right: 190rpx;
				}

				.bxBox {
					position: relative;
					display: flex;
					/* padding: 0 30rpx; */
					min-height: 100rpx;
					/* background-color: #ffffff; */
					/* justify-content: space-between; */
					align-items: center;
					font-size: 30rpx;
					line-height: 1.6em;
					flex: 1;

					.bxImg {
						display: inline-block;
						margin-right: 10rpx;
						width: 1.6em;
						text-align: center;
					}
				}

			}
		}

		.center-box {
			color: #333333;
			width: 700rpx;
			background-color: #FFFFFF;
			margin: 0 auto;
			border-radius: 20rpx;
			padding: 0rpx 30rpx 0rpx;
			position: relative;
			margin-top: 20rpx;
		}
	}
	
	.publish-goods-wrap {
		background: rgba(255, 255, 255, 1);
		padding: 24rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
	}
	
	.publish-goods-btn {
		margin: 24rpx;
		background: #0079FE;
		color: #FFFFFF;
		height: 82rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 82rpx;
	}
</style>
